body {
    background-color: #f2f2f2;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    background: #fb7299;
    color: #fff;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu_icon {
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    /* background-color: #fff3; */
    padding: 12px 0;
    cursor: pointer;

    .line1,
    .line2,
    .line3 {
        width: 100%;
        height: 8px;
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
    }

    .line1 {
        animation: animate_1_rev 0.7s ease-in-out;
    }
    .line2 {
        margin: 16px 0;
        animation: animate_2_rev 0.7s ease-in-out;
    }
    .line3 {
        animation: animate_3_rev 0.7s ease-in-out;
    }

    &.active {
        .line1 {
            animation: animate_1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
        }
        .line2 {
            animation: animate_2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
        }
        .line3 {
            animation: animate_3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
        }
    }
}

.no_animation {
    animation: none !important;
}

@keyframes animate_1 {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, 24px, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(0, 24px, 0) rotate(45deg);
    }
}
@keyframes animate_2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}
@keyframes animate_3 {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, -24px, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(0, -24px, 0) rotate(135deg);
    }
}

@keyframes animate_1_rev {
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, 24px, 0) rotate(0deg);
    }
    0% {
        transform: translate3d(0, 24px, 0) rotate(45deg);
    }
}
@keyframes animate_2_rev {
    100% {
        transform: scale(1);
        opacity: 1;
    }
    0% {
        transform: scale(0);
        opacity: 0;
    }
}
@keyframes animate_3_rev {
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, -24px, 0) rotate(0deg);
    }
    0% {
        transform: translate3d(0, -24px, 0) rotate(135deg);
    }
}
